<!--
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-08-29 19:04:54
-->
<template>
  <div>
    <ItemCard title="今日订单量" :number="orderToday">
      <template #center>
        <div class="box" ref="myBox"></div>
      </template>
      <template #bottom>
        <div style="font-size: 12px; margin: 5px 0">
          昨日订单量
          <span style="margin-left: 3px">￥{{ orderLastDay }}</span>
        </div>
      </template>
    </ItemCard>
  </div>
</template>

<script lang="ts" setup>
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useEchartsStore } from '@/stores/echarts'
import * as echarts from 'echarts'
import throttle from 'Lodash/throttle'

const echartsStore = useEchartsStore()
const myBox = ref()
const orderToday = computed(() => {
  return echartsStore.echartsData.orderToday
})
const orderLastDay = computed(() => {
  return echartsStore.echartsData.orderLastDay
})
const orderTrend = computed(() => {
  return echartsStore.echartsData.orderTrend
})
const orderTrendAxis = computed(() => {
  return echartsStore.echartsData.orderTrendAxis
})

const getOption = () => {
  return {
    tooltip: { trigger: 'axis' },
    xAxis: {
      data: orderTrendAxis.value || [],
      show: false,
    },
    grid: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
    },
    yAxis: {
      show: false,
    },
    series: {
      name: '实时订单数',

      type: 'line',
      smooth: true,
      data: orderTrend.value || [],
      areaStyle: {
        color: 'hotpink',
      },
      itemStyle: {
        opacity: 0,
      },
      lineStyle: {
        opacity: 0,
      },
    },
  }
}

let myChart: echarts.ECharts | null = null
const resized = throttle(() => {
  myChart?.resize()
}, 100)
onMounted(() => {
  myChart = echarts.init(myBox.value)
  myChart.setOption(getOption())

  window.addEventListener('resize', resized)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', resized)
})

watch(orderToday, () => {
  myChart?.setOption(getOption())
})
</script>

<script lang="ts">
export default {
  name: 'TodayOrder',
}
</script>

<style lang="scss" scoped>
.box {
  height: 50px;
}
</style>
